<template>
<div class="user-info">
    <el-row type="flex" justify="end">
        <el-tooltip content="打印个人基本信息">
            <router-link :to="`/employees/myPrint/${userId}?type=personal`">
                <i class="el-icon-printer" style="font-size: 20px; color: #2784fb;" />
            </router-link>
        </el-tooltip>
    </el-row>
    <!-- 个人信息 -->
    <div class="title">基础信息</div>
    <el-form
        ref="importantForm"
        class="importantForm"
        label-width="100px"
        :model="userInfo"
        :rules="userRules"
    >
        <!-- 工号 入职时间 -->
        <el-row class="inline-info">
            <el-col :span="12">
                <el-form-item label="工号">
                    <el-input v-model="userInfo.workNumber" class="inputW" disabled />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="入职时间">
                    <el-date-picker
                        v-model="userInfo.timeOfEntry"
                        style="width: 100%"
                        class="inputW"
                    />
                </el-form-item>
            </el-col>
        </el-row>
        <!-- 姓名 部门 -->
        <el-row class="inline-info">
            <el-col :span="12">
                <el-form-item label="姓名" prop="username">
                    <el-input v-model="userInfo.username" class="inputW" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="部门" prop="departmentName">
                    <el-input v-model="userInfo.departmentName" class="inputW" />
                </el-form-item>
            </el-col>
        </el-row>
        <!--手机 聘用形式  -->
        <el-row class="inline-info">
            <el-col :span="12">
                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="userInfo.mobile" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="聘用形式" prop="formOfEmployment">
                    <el-select v-model="userInfo.formOfEmployment" class="inputW">
                        <el-option
                            v-for="item in EmployeeEnum.hireType"
                            :key="item.id"
                            :label="item.value"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row class="inline-info">
            <el-col :span="12">
                <!-- 个人头像 -->
                <el-form-item label="员工头像">
                    <!-- 放置上传图片 -->
                    <ImageUpload ref="headImg" type="head"></ImageUpload>
                </el-form-item>
            </el-col>
        </el-row>
        <!-- 保存个人信息 -->
        <el-row class="inline-info" type="flex" justify="center">
            <el-col :span="10" style="display: flex; justify-content: space-evenly;">
                <el-button type="primary" @click="saveUser">保存更新</el-button>
                <el-button @click="$router.back()">返回</el-button>
            </el-col>
        </el-row>
    </el-form>
    <!-- 详细信息 -->
    <div class="title">详细信息</div>
    <el-form ref="detailInfo" class="detailInfo" label-width="130px">
        <div class="block">
            <!-- 员工照片 -->
            <el-form-item label="员工照片">
                <!-- 放置上传图片 -->
                <ImageUpload ref="headPhoto" type="photo"></ImageUpload>
            </el-form-item>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="最高学历">
                        <el-select v-model="formData.theHighestDegreeOfEducation" class="inputW2">
                            <el-option
                                v-for="item in EmployeeEnum.highestDegree"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="国家/地区">
                        <el-select v-model="formData.nationalArea" class="inputW2">
                            <el-option
                                v-for="item in EmployeeEnum.isOverseas"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="护照号">
                <el-input v-model="formData.passportNo" placeholder="正规护照格式" class="inputW" />
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="formData.idNumber" placeholder="正规身份证格式" class="inputW" />
            </el-form-item>
            <el-form-item label="籍贯">
                <el-input v-model="formData.nativePlace" placeholder="籍贯地址" class="inputW5" />
            </el-form-item>
            <el-form-item label="民族">
                <el-input v-model="formData.nation" placeholder="请输入民族" class="inputW2" />
            </el-form-item>

            <el-row type="flex" justify="center">
                <el-col>
                    <el-form-item label="婚姻状况">
                        <el-select v-model="formData.maritalStatus" class="inputW2">
                            <el-option
                                v-for="item in EmployeeEnum.maritaStatus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="星座">
                        <el-select v-model="formData.constellation" class="inputW2">
                            <el-option
                                v-for="item in EmployeeEnum.constellation"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="血型">
                        <el-select v-model="formData.bloodType" class="inputW2">
                            <el-option
                                v-for="item in EmployeeEnum.bloodType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="生日">
                <el-input v-model="formData.birthday" placeholder="示例 0323" class="inputW" />
            </el-form-item>

            <el-form-item label="年龄">
                <el-input v-model="formData.age" type="number" class="inputW2" />
            </el-form-item>

            <el-form-item label="户籍所在地">
                <el-input v-model="formData.domicile" class="inputW5" />
            </el-form-item>

            <el-form-item label="政治面貌">
                <el-input v-model="formData.politicalOutlook" class="inputW2" />
            </el-form-item>

            <el-form-item label="入党时间">
                <el-date-picker
                    v-model="formData.timeToJoinTheParty"
                    style="width: 100%"
                    type="date"
                    placeholder="选择日期"
                    class="inputW"
                    value-format="yyyy-MM-dd"
                />
            </el-form-item>
            <el-form-item label="存档机构">
                <el-input v-model="formData.archivingOrganization" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="子女状态">
                <el-input v-model="formData.stateOfChildren" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="子女有无商业险">
                <el-radio-group v-model="formData.doChildrenHaveCommercialInsurance">
                    <el-radio label="1">有</el-radio>
                    <el-radio label="2">无</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="有无违法违纪状态">
                <el-input v-model="formData.isThereAnyViolationOfLawOrDiscipline" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="有无重大病史">
                <el-input v-model="formData.areThereAnyMajorMedicalHistories" placeholder="请输入" />
            </el-form-item>
        </div>
        <!-- 通讯信息 -->
        <div class="block">
            <div class="title">通讯信息</div>
            <el-form-item label="QQ">
                <el-input v-model="formData.qq" placeholder="请输入" class="inputW" />
            </el-form-item>
            <el-form-item label="微信">
                <el-input v-model="formData.wechat" placeholder="请输入" class="inputW" />
            </el-form-item>
            <el-form-item label="现居住地">
                <el-input v-model="formData.placeOfResidence" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="通讯地址">
                <el-input v-model="formData.postalAddress" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="联系手机">
                <el-input
                    v-model="formData.contactTheMobilePhone"
                    placeholder="11位字符"
                    maxlength="11"
                    class="inputW"
                    @change.native="handlePhone(2)"
                />
            </el-form-item>
            <el-form-item label="个人邮箱">
                <el-input
                    v-model="formData.personalMailbox"
                    placeholder="请输入"
                    type="mail"
                    class="inputW"
                />
            </el-form-item>
            <el-form-item label="紧急联系人">
                <el-input v-model="formData.emergencyContact" placeholder="请输入" class="inputW" />
            </el-form-item>
            <el-form-item label="紧急联系电话">
                <el-input v-model="formData.emergencyContactNumber" placeholder="11位字符" class="inputW" />
            </el-form-item>
        </div>
        <!-- 账号信息 -->
        <div class="block">
            <div class="title">账号信息</div>
            <el-form-item label="社保电脑号">
                <el-input v-model="formData.socialSecurityComputerNumber" placeholder="请输入" class="inputW" />
            </el-form-item>
            <el-form-item label="公积金账号">
                <el-input v-model="formData.providentFundAccount" placeholder="请输入" class="inputW" />
            </el-form-item>
            <el-form-item label="银行卡号">
                <el-input v-model="formData.bankCardNumber" placeholder="请输入" class="inputW" />
            </el-form-item>
            <el-form-item label="开户行">
                <el-input v-model="formData.openingBank" placeholder="请输入" class="inputW" />
            </el-form-item>
        </div>
        <!-- 教育信息 -->
        <div class="block">
            <div class="title">教育信息</div>
            <el-form-item label="学历类型">
                <el-select v-model="formData.educationalType" placeholder="请选择">
                    <el-option
                        v-for="item in EmployeeEnum.educationType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="毕业学校">
                <el-input v-model="formData.graduateSchool" placeholder="请输入" class="inputW2" />
            </el-form-item>
            <el-form-item label="入学时间">
                <el-date-picker
                    v-model="formData.enrolmentTime"
                    style="width: 100%"
                    type="data"
                    placeholder="请输入时间"
                    class="inputW"
                    value-format="yyyy-MM-dd"
                />
            </el-form-item>
            <el-form-item label="毕业时间">
                <el-date-picker
                    v-model="formData.graduationTime"
                    style="width: 100%"
                    type="data"
                    placeholder="请输入时间"
                    class="inputW"
                    value-format="yyyy-MM-dd"
                />
            </el-form-item>
            <el-form-item label="专业">
                <el-input v-model="formData.major" placeholder="请输入" class="inputW" />
            </el-form-item>
        </div>
        <!-- 从业信息 -->
        <div class="block">
            <div class="title">从业信息</div>
            <el-form-item label="上家公司">
                <el-input v-model="formData.homeCompany" placeholder="请输入" class="inputW" />
            </el-form-item>
            <el-form-item label="职称">
                <el-input v-model="formData.title" placeholder="请输入" class="inputW" />
            </el-form-item>
            <el-form-item label="有无竞业限制">
                <el-input v-model="formData.isThereAnyCompetitionRestriction" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input
                    v-model="formData.remarks"
                    type="textarea"
                    placeholder="请输入备注"
                />
            </el-form-item>
            <!-- 保存员工信息 -->
            <el-row class="inline-info" type="flex" justify="center">
                <el-col :span="10" style="display: flex; justify-content: space-evenly;">
                    <el-button type="primary" @click="savePersonal">保存更新</el-button>
                    <el-button @click="$router.back()">返回</el-button>
                </el-col>
            </el-row>
        </div>
    </el-form>
</div>
</template>

<script>
import EmployeeEnum from '@/api/constant/employees'
import { updateUserDetailById, getUserDetailById, getEmpDetailById, updateEmpDetailById } from '@/api/employees.js'
export default {
	data() {
		return {
			userId: this.$route.params.id,
			EmployeeEnum, // 员工枚举数据
			userInfo: {},
			formData: {
				userId: '',
				username: '', // 用户名
				sex: '', // 性别
				mobile: '', // 手机
				companyId: '', // 公司id
				departmentName: '', // 部门名称
				//  onTheJobStatus: '', // 在职状态 no
				dateOfBirth: '', // 出生日期
				timeOfEntry: '', // 入职时间
				theHighestDegreeOfEducation: '', // 最高学历
				nationalArea: '', // 国家
				passportNo: '', // 护照号
				idNumber: '', // 身份证号
				idCardPhotoPositive: '', // 身份证照正
				idCardPhotoBack: '', // 身份证照正
				nativePlace: '', // 籍贯
				nation: '', // 民族
				englishName: '', // 英文名字
				maritalStatus: '', // 婚姻状况
				staffPhoto: '', // 员工照片
				birthday: '', // 生日
				zodiac: '', // 属相
				age: '', // 年龄
				constellation: '', // 星座
				bloodType: '', // 血型
				domicile: '', // 户籍所在地
				politicalOutlook: '', // 政治面貌
				timeToJoinTheParty: '', // 入党时间
				archivingOrganization: '', // 存档机构
				stateOfChildren: '', // 子女状态
				doChildrenHaveCommercialInsurance: '1', // 保险状态
				isThereAnyViolationOfLawOrDiscipline: '', // 违法违纪状态
				areThereAnyMajorMedicalHistories: '', // 重大病史
				qq: '', // QQ
				wechat: '', // 微信
				residenceCardCity: '', // 居住证城市
				dateOfResidencePermit: '', // 居住证办理日期
				residencePermitDeadline: '', // 居住证截止日期
				placeOfResidence: '', // 现居住地
				postalAddress: '', // 通讯地址
				contactTheMobilePhone: '', // 联系手机
				personalMailbox: '', // 个人邮箱
				emergencyContact: '', // 紧急联系人
				emergencyContactNumber: '', // 紧急联系电话
				socialSecurityComputerNumber: '', // 社保电脑号
				providentFundAccount: '', // 公积金账号
				bankCardNumber: '', // 银行卡号
				openingBank: '', // 开户行
				educationalType: '', // 学历类型
				graduateSchool: '', // 毕业学校
				enrolmentTime: '', // 入学时间
				graduationTime: '', // 毕业时间
				major: '', // 专业
				graduationCertificate: '', // 毕业证书
				certificateOfAcademicDegree: '', // 学位证书
				homeCompany: '', // 上家公司
				title: '', // 职称
				resume: '', // 简历
				isThereAnyCompetitionRestriction: '', // 有无竞业限制
				proofOfDepartureOfFormerCompany: '', // 前公司离职证明
				remarks: '' // 备注
			},
			/* 表单校验 */
			userRules: {
				timeOfEntry: [{ required: true, message: '入职时间不能为空', trigger: 'blur' }],
				username: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
				departmentName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
				mobile: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }],
				formOfEmployment: [{ required: true, message: '入职形式不能为空', trigger: 'blur' }]
			}
		}
	},
	created() {
		this.getEmpDetail(this.userId)
	},
	methods: {
		/* 获取员工详细信息 */
		async getEmpDetail(id) {
			const important_res = await getUserDetailById(id)
			this.userInfo = important_res
			if (this.userInfo.staffPhoto) {
				this.$refs.headImg.fileList = [{ url: this.userInfo.staffPhoto, upload: true }]
			}
			const detail_res = await getEmpDetailById(id)
			this.formData = detail_res
			if (this.formData.staffPhoto) {
				this.$refs.headPhoto.fileList = [{ url: this.formData.staffPhoto, upload: true }]
			}
			this.formData = detail_res
		},
		/* 保存详细信息 */
		async savePersonal() {
			const fileList = this.$refs.headPhoto.fileList
			if (fileList.length === 0) {
				this.$refs.headPhoto.sureRemove()
			}
			if (fileList.some(item => !item.upload)) {
				this.$message.warning('您当前还有图片没有上传完成！')
				return
			}
			const staffPhoto = this.$refs.headPhoto.fileList[0] ? this.$refs.headPhoto.fileList[0].url : ''
			this.formData.staffPhoto = staffPhoto
			await updateEmpDetailById(this.userId, this.formData)
			this.$message.success('已更新个人详细信息')
			this.$router.back()
		},

		/* 保存基本信息 */
		async saveUser() {
			const fileList = this.$refs.headImg.fileList
			if (fileList.length === 0) {
				this.$refs.headImg.sureRemove()
			}
			if (fileList.some(item => !item.upload)) {
				this.$message.warning('您当前还有图片没有上传完成！')
				return
			}
			const staffPhoto = this.$refs.headImg.fileList[0] ? this.$refs.headImg.fileList[0].url : ''
			this.userInfo.staffPhoto = staffPhoto
			await updateUserDetailById(this.userId, this.userInfo)
			await this.$store.dispatch('user/getInfo')
			this.$message.success('已更新个人信息')
			// this.$router.back()
		}
	}
}
</script>

<style scoped lang="scss">
	.el-select{
		width: 100%;
	}
	.user-info{
		max-width: 1000px;
		margin: 0 auto;
		.title{
			color: #2784fb;
			font-weight: bold;
			font-size: 20px;
			margin: 20px 0;
		}
		.importantForm{
			.el-form-item{
				max-width: 500px;
			}
		}

		.detailInfo{
			margin-top: 30px;
		}
	}
</style>
